<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>模拟一个数据监测</title>
    </head>
    <body>

        <script type="text/javascript">
            let data = {
                name: 'wjz',
                age: 23
            }

            const obs = new Observer(data); // 创建data的观察者

            let vm = {};
            vm._data = data = obs;

            /**
             * 观察者
             * @param obj
             * @constructor
             */
            function Observer(obj) {
                // 获取被观察对象中所有的属性名
                const keys = Object.keys(obj);

                // 遍历所有属性
                keys.forEach((key) => {
                    Object.defineProperty(this, key, {
                        get() {
                            return obj[key];
                        },
                        set(val) {
                            console.log(`${key}被修改了,页面重新渲染`) // 此处在vm中进行页面重新渲染
                            obj[key] = val;
                        }
                    })
                })
            }

            const a = {aa: 10, bb: 20}
            console.log(a['aa']) // 这种方式可以获取对象中某个属性的值，传入属性名的字符串
        </script>

    </body>
</html>